<template>
	<view class="page1">
		
		<view class="shop" style="background: #f3f3f3;width: 100%;float: left;">
			<view style="width:96%;margin-left: 2%;padding-top: 100rpx;float: left;background: #f3f3f3">
				<view style="width: 33%;float:left"  v-for="(item,index) in tj_list" @click="tz(item.id)">
					<view style="width: 90%;margin: 0 auto;background: #fff;border: .5em;">
						<image :src="item.img" style="height:200rpx;width: 100%;border-radius: .5em;"></image>
						<view style="margin-top: 10rpx;padding-bottom: 10rpx;;font-weight: 700;width: 100%;text-align: center;overflow:hidden;white-space: nowrap;;text-overflow:ellipsis">
							{{item.title}}
						</view>
						
					</view>
				</view>
			</view>
			
			<view style="width:92%;margin-left: 3%;margin-top:40rpx;width: 100%;float: left;font-weight:700;background: #f3f3f3">
				<view style="width: 100%;float: left;">
					潮流趋势
				</view>
			</view>
			
	<!-- 		<view style="width:92%;margin-left: 3%;margin-top:40rpx;width: 100%;float: left;font-weight:700;background: #f3f3f3">
				<view 
				 v-for="(item,index) in hotList" @click="hotIndex=index"
				class="ccc"
				:style="hotIndex==index?'color:#fff;background:#000':'color:#000;background:#fff'"
				>
					{{item}}
				</view>
			</view> -->
			
			<view class="navs" style="width:100%;padding-top: 20rpx;">
				<view class="nav"  v-for="(item,index) in list" @click="tz(item.id)">	
					<view style="width: 95%;background: #fff;border-radius: 0.5em;text-align: center;padding-top: 20px;">
						<image :src="item.img" style="width:280rpx;height: 300rpx;margin: 0 auto;" ></image>
						<view style="width:90%;;margin-top: 10rpx;text-align: left;margin-left:5%;
						padding-bottom:30rpx;float: left;font-size: 28rpx;white-space: pre-wrap;">
							{{item.title}}
							
							<view style="font-weight: 700;margin-top: 10rpx;">
								价值：
								<span>
									{{item.money}}
								</span>
							</view>
						</view>
					</view>
				</view>	
				
			
			</view>
			
			<view style="width: 100%;height: 120rpx;">
				
			</view>
			
		</view>
		<tabbar  v-if="lang==0" :current="0"></tabbar>
		<tabbareng v-if="lang==1" :current="0"></tabbareng>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',

				tabList: ['初阶矿山', '进阶矿山', '高阶矿山'],
				tabIndex: 0,
				
				hotList: ['热门', '潮玩', '服饰',"定制"],
				hotIndex: 0,

				popupShow: false,
				num: 5,
				
				tj_list: [],
				
				page: 1,
				total: 0,
				list: [],
				lang:1
			};
		},
		onLoad() {
			
			
		},
		onShow(){
			let _this = this;
			let lang = uni.getStorageSync('lang')
			if(lang){
				this.lang = lang;
			
				_this.get_tj_list1();
				_this.get_list1();
			}else{
				_this.get_tj_list();
				_this.get_list();
			}
			
			
			_this.$api.request('/api/index/gets1', {}, uni.getStorageSync('token'), function(res) {
				uni.hideLoading();
				if (res.code == 1) {
					
					_this.lang = res.data
					 uni.setStorageSync('lang',_this.lang)
				}
				uni.hideLoading();
			});
		
			
		},
		onReachBottom: function() {
			if (this.list.length < this.total) {
				this.page++;
				this.get_list();
			}
		},
		methods: {
			tz(id){
			
					uni.navigateTo({ url: "/pages/index/shop_dea?id="+id});
			
				
			},
			get_tj_list1(){
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/index/getShopTop1', {}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
					
							_this.tj_list = res.data.data;
					
					}
					uni.hideLoading();
				});
			},
			get_list1(){
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/index/getShopList1', {page:this.page}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
						_this.total = res.data.total;
						_this.score = res.data.score
						if (_this.page == 1) {
							_this.list = res.data.data;
						} else {
							_this.list = _this.list.concat(res.data.data);
						}
					
					}
					uni.hideLoading();
				});
			},
			get_tj_list(){
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/index/getShopTop', {}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
					
							_this.tj_list = res.data.data;
					
					}
					uni.hideLoading();
				});
			},
			get_list(){
				
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/index/getShopList', {page:this.page}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
						_this.total = res.data.total;
						_this.score = res.data.score
						if (_this.page == 1) {
							_this.list = res.data.data;
						} else {
							_this.list = _this.list.concat(res.data.data);
						}
					
					}
					uni.hideLoading();
				});
			},
			gonglu(){
				uni.navigateTo({ url: "/pages/index/gonglue"});
			},
			// tab切换
			tabChange(index) {
				this.tabIndex = index;
			},

			// 数量减少
			minusHandle() {
				if (this.num <= 1) {
					return uni.showToast({
						title: '数量最小1',
						icon: 'none'
					});
				}
				this.num -= 1;
			},

			// 数量增加
			addHandle() {
				if(this.num>=5) {
					return uni.showToast({
						title: '数量最大5',
						icon: 'none'
					});
				}
				this.num += 1;
			},

			// 输入事件
			inputChange(e) {
				let value = e.detail.value + '';
				value = value.replace(/^\./g, ''); //  不能以“.”开头
				value = value.replace(/[^\d]/g, ''); //清除“数字”以外的字符
				value = value.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				if (value.indexOf('.') < 0 && value != '') {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					value = parseFloat(value);
				}
				if(value>5) {
					value = 5;
				}
				setTimeout(() => {
					this.num = value;
				}, 0);
			},

			// 打开购买弹窗
			openPopup() {
				this.popupShow = true;
			},

			// 关闭购买弹窗
			popupClose() {
				this.popupShow = false;
				this.num = 5;
			}
		}
	};
</script>

<style lang="scss">
	.page1{
		min-height: 100vh;
		background: url(/static/my/f765b18c7efacf820f7201653c25ffa.png)
	}
	.shop{
		.navs {
			display: flex;
			flex-wrap: wrap;
		}
		
		.nav {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 32rpx;
			width: 50%;
		}
	}
	.ccc{
		border-radius: 0.2em;height: 40rpx;width: 80rpx;text-align:center;
		line-height: 40rpx;font-size: 22rpx;color: #fff;background: #000;float: left;margin-left: 20rpx;
		
		&:first-child{
			margin-left: 0px;
		}
	}

	.index_bg_wrap {
		padding: 64rpx 0;
		position: relative;
		.topc{
			position: relative;
			top:330rpx;
			height: 70rpx;
			width: 180rpx;
			z-index: 9;
			margin-left: 39%;
		}

		.rank-icon {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			width: 64rpx;
			height: 64rpx;
		}

		.index_bg {
			width: 100%;
			height: 371px;
		}
	}

	.btn_wrap {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 32rpx;

		.btn_stones {
			background: url(/static/ic_ape_index_myrocks.png);
			background-size: 100%;
			height: 155rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
	
		}

		.btn_stones_text {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 48rpx;
			font-weight: bold;
			line-height: 1;
		}

		.btn_stones_tips {
			color: rgba(255, 255, 255, 0.3);
			font-size: 28rpx;
			padding: 8rpx 0;
			line-height: 1;
		}

		.stone_icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 32rpx;
		}

		.btn_tips {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.3);
			padding: 32rpx 0;
		}
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tab {
			color: rgba(255, 255, 255, 0.3);
			background: #1c1f28;
			padding: 32rpx;
			width: 32%;
			box-sizing: border-box;
			border-radius: 16rpx 16rpx 0 0;
			display: flex;
			justify-content: center;

			&.active {
				color: #fff;
				background: #393d48;
			}
		}
	}

	.panel-wrap {
		background: #393d48;

		.panel-total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
		}

		.panel-total-img {
			width: 128rpx;
			height: 128rpx;
			position: relative;
			right: 10px;
		}

		.panel-total-em {
			position: relative;
			width: 320rpx;
			height: 128rpx;
			background: #1c1f28;
			border-radius: 0.5em;
			.total-em-content {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 150rpx;
				color: #fff;
			}

			.num {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 1;
			}

			.label {
				font-size: 22rpx;
			}
		}
	}

	.level-wrap {
		.level-top {
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;
			margin: 0 32rpx;
		}

		.level-title {
			color: #fff;
			font-weight: bold;
			flex: 1;
		}

		.level-btn {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 0;
			font-size: 24rpx;
			background: transparent;
			border: 1px solid rgba(255, 255, 255, 0.3);
			padding: 8rpx 16rpx;
			color: rgba(255, 255, 255, 0.3);
		}

		.arrow {
			width: 24rpx;
			height: 24rpx;
		}

		.level-img-wrap {
			position: relative;
			.mayi_arr{
				position: absolute;
				top: 180rpx;
				left:50rpx;
				image{
					width: 60rpx;
					height: 60rpx;
					// transform: rotate(31deg);
				}
			}
		}

		.level-img {
			width: 750rpx;
			height: 360rpx;
		}
		.level-img-text {
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.3);
			position: absolute;
			left: 22rpx;
			bottom: 86rpx;
		}

		.level-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 32rpx;

			.level-bottom-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			.level-bottom-left {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.5);
			}

			.level-bottom-right {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.5);
				display: flex;
				align-items: center;
			}
		}

		.level-buy {
			position: relative;
			padding: 32rpx;
			display: flex;
			align-items: center;
			top:-30rpx;		
			.level-buy-img {
				height: 98rpx;
				width: 100%;
			}

			.level-buy-text {
				font-size: 36rpx;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.popup-container {
		position: relative;
		padding-bottom: 100rpx;
		padding-top: 60rpx;

		.popup_bg {
			width: 750rpx;
			height: 202rpx;
			vertical-align: middle;
		}
		
		.tips_img {
			width: 166rpx;
			height: 108rpx;
			position: absolute;
			top: 0rpx;
			left: 120rpx;
			z-index: 10;
		}

		.popup_close {
			position: absolute;
			top: 100rpx;
			right: 20rpx;
			width: 60rpx;
			height: 60rpx;
			z-index: 9;
		}

		.product_img {
			position: absolute;
			left: 32rpx;
			top: 0rpx;
			width: 200rpx;
			height: 260rpx;
			z-index: 9;
		}

		.popup_title {
			position: absolute;
			top: 110rpx;
			left: 250rpx;
			z-index: 9;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 42rpx;
				font-weight: bold;
			}

			.subtitle {
				font-size: 28rpx;
				background: #d1d1d1;
				padding: 4rpx 16rpx;
				border-radius: 10rpx;
				margin-top: 8rpx;
			}
		}

		.popup_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			background: #f8f8f8;

			.popup_item {
				background: #fff;
				width: 210rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 12rpx 16rpx;
				box-sizing: border-box;
			}
			.popup_item_img {
				
				width: 100rpx;
				height: 130rpx;
				margin-right: 16rpx;
				box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, .5);
			}

			.pupup_desc_name {
				font-size: 28rpx;
				font-weight: bold;
			}

			.pupup_desc_num {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.popup_block {
			width: 100%;
			height: 32rpx;
			background: #f8f8f8;
		}

		.popup_input_wrap {
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 32rpx 128rpx;
			box-sizing: border-box;

			.reduce,
			.add {
				border: 3rpx solid #eee;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6rpx;
			}

			.math-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.popup_input {
				flex: 1;
				text-align: center;
				height: 80rpx;
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		.popup_tips {
			background: #f8f8f8;
			padding: 24rpx 32rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.gray {
				color: #999;
			}

			.tips_icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.popup_btn_wrap {
			background: #f8f8f8;
			padding: 0 32rpx 64rpx 32rpx;

			.popup_btn {
				background: linear-gradient(to right, #e5d5b2, #d5b488);
				border-radius: 16rpx;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-shadow: 0 4px 0 0 #aa8666;

				.popup_btn_top {
					font-size: 36rpx;
					font-weight: bold;
				}

				.popup_btn_bottom {
					font-size: 24rpx;
				}
			}
		}
	}
</style>
